export const templateData = [
  {
    label: 'Computer Vision',
    children: [
      {
        title: 'Semantic Segmentation with Polygons',
        type: 'community',
        group: 'Computer Vision',
        order: 1,
        image:
          '/front-static/templates/semantic-segmentation-with-polygons.png',
        details: '<h1>Draw a polygon around object</h1>',
        data: {
          image: '/front-static/samples/sample.jpg',
        },
        config:
          '<View>\n\n  <Header value="Select label and click the image to start"/>\n  <Image name="image" value="$image" zoom="true"/>\n\n  <PolygonLabels name="label" toName="image"\n                 strokeWidth="3" pointSize="small"\n                 opacity="0.9">\n    <Label value="Airplane" background="red"/>\n    <Label value="Car" background="blue"/>\n  </PolygonLabels>\n\n</View>\n',
      },
      {
        title: 'Semantic Segmentation with Masks',
        type: 'community',
        group: 'Computer Vision',
        order: 2,
        image: '/front-static/templates/semantic-segmentation-with-masks.png',
        details: '<h1>Draw masks around the object with the brush tool</h1>',
        data: {
          image: '/front-static/samples/sample.jpg',
        },
        config:
          '<View>\n  <Image name="image" value="$image" zoom="true"/>\n  <BrushLabels name="tag" toName="image">\n    <Label value="Airplane" background="rgba(255, 0, 0, 0.7)"/>\n    <Label value="Car" background="rgba(0, 0, 255, 0.7)"/>\n  </BrushLabels>\n</View>\n',
      },
      {
        title: 'Object Detection with Bounding Boxes',
        type: 'community',
        group: 'Computer Vision',
        order: 3,
        image:
          '/front-static/templates/object-detection-with-bounding-boxes.png',
        details: '<h1>Draw a bounding box around the object</h1>',
        data: {
          image: '/front-static/samples/sample.jpg',
        },
        config:
          '<View>\n  <Image name="image" value="$image"/>\n  <RectangleLabels name="label" toName="image">\n    <Label value="Airplane" background="green"/>\n    <Label value="Car" background="blue"/>\n  </RectangleLabels>\n</View>\n',
      },
      {
        title: 'Keypoint Labeling',
        type: 'community',
        group: 'Computer Vision',
        order: 10000,
        image: '/front-static/templates/keypoints.png',
        details: '<h1>Click the label and then on the canvas</h1>',
        data: {
          img: '/front-static/samples/sample.jpg',
        },
        config:
          '<View>\n  <KeyPointLabels name="kp-1" toName="img-1">\n    <Label value="Face" background="red" />\n    <Label value="Nose" background="green" />\n  </KeyPointLabels>\n  <Image name="img-1" value="$img" />\n</View>\n',
      },

      {
        title: 'Image Captioning',
        type: 'community',
        group: 'Computer Vision',
        image: '/front-static/templates/image-captioning.png',
        details: '<h1>Write text describing the image</h1>',
        data: {
          captioning: '/front-static/samples/trees_in_snow.jpg',
        },
        config:
          '<View>\n  <Image name="image" value="$captioning"/>\n  <Header value="Describe the image:"/>\n  <TextArea name="caption" toName="image" placeholder="Enter description here..."\n            rows="5" maxSubmissions="1"/>\n</View>\n',
      },
      {
        title: 'Image Classification',
        type: 'community',
        group: 'Computer Vision',
        image: '/front-static/templates/image-classification.png',
        details: '<h1>Classify the image</h1>',
        data: {
          image: '/front-static/samples/sample.jpg',
        },
        config:
          '<View>\n  <Image name="image" value="$image"/>\n  <Choices name="choice" toName="image">\n    <Choice value="Adult content"/>\n    <Choice value="Weapons" />\n    <Choice value="Violence" />\n  </Choices>\n</View>\n',
      },

      {
        title: 'Optical Character Recognition',
        type: 'community',
        group: 'Computer Vision',
        image: '/front-static/templates/optical-character-recognition.png',
        details:
          '<h1>Draw a bounding box or polygon around region and write down the text found inside</h1>',
        data: {
          ocr: 'https://htx-pub.s3.amazonaws.com/demo/ocr/example.jpg',
        },
        config:
          '<View>\n  <Image name="image" value="$ocr"/>\n\n  <Labels name="label" toName="image">\n    <Label value="Text" background="green"/>\n    <Label value="Handwriting" background="blue"/>\n  </Labels>\n\n  <Rectangle name="bbox" toName="image" strokeWidth="3"/>\n  <Polygon name="poly" toName="image" strokeWidth="3"/>\n\n  <TextArea name="transcription" toName="image"\n            editable="true"\n            perRegion="true"\n            required="true"\n            maxSubmissions="1"\n            rows="5"\n            placeholder="Recognized Text"\n            displayMode="region-list"\n            />\n</View>\n',
      },

      {
        title: 'Visual Question Answering',
        type: 'community',
        group: 'Computer Vision',
        image: '/front-static/templates/visual-question-answering.png',
        details:
          '<h1>Answer the questions related to what you see on the picture</h1>',
        data: {
          image: '/front-static/samples/sample.jpg',
        },
        config:
          '<View>\n  <Image name="image" value="$image"/>\n  <Labels name="aspect" toName="q1">\n    <Label value="attribute identification" background="#F39C12"/>\n    <Label value="counting" background="#E74C3C"/>\n    <Label value="comparison" background="#3498DB"/>\n    <Label value="multiple attention" background="#2ECC71"/>\n    <Label value="logical operations" background="#8E44AD"/>\n  </Labels>\n  <Header value="Please answer these questions:"/>\n\n  <View style="display: grid; grid-template-columns: 1fr 10fr 1fr 3fr; column-gap: 1em">\n    <Header value="Q1:"/>\n  <Text name="q1" value="$q1"/>\n   <Header value="A1:"/>\n    <TextArea name="answer1" toName="q1" rows="1" maxSubmissions="1"/>\n  </View>\n\n  <View style="display: grid; grid-template-columns: 1fr 10fr 1fr 3fr; column-gap: 1em">\n    <Header value="Q2:"/>\n  <Text name="q2" value="$q2"/>\n   <Header value="A2:"/>\n    <TextArea name="answer2" toName="q2" rows="1" maxSubmissions="1"/>\n  </View>\n  <View style="display: grid; grid-template-columns: 1fr 10fr 1fr 3fr; column-gap: 1em">\n    <Header value="Q3:"/>\n  <Text name="q3" value="$q3"/>\n   <Header value="A3:"/>\n    <TextArea name="answer3" toName="q3" rows="1" maxSubmissions="1"/>\n    </View>\n  <View style="display: grid; grid-template-columns: 1fr 10fr 1fr 3fr; column-gap: 1em">\n    <Header value="Q4:"/>\n  <Text name="q4" value="$q4"/>\n   <Header value="A4:"/>\n    <TextArea name="answer4" toName="q4" rows="1" maxSubmissions="1"/>\n    </View>\n</View>\n',
      },
    ],
  },
  {
    label: 'Natural Language Processing',
    children: [
      {
        title: 'Question Answering',
        type: 'community',
        group: 'Natural Language Processing',
        order: 1,
        image: '/front-static/templates/question-answering.png',
        details: '<h1>Select an answer from text</h1>',
        data: {
          question: 'How could black holes be detected?',
          text: 'The boundary of the region from which no escape is possible is called the event horizon. Although the event horizon has an enormous effect on the fate and circumstances of an object crossing it, according to general relativity it has no locally detectable features.[4] In many ways, a black hole acts like an ideal black body, as it reflects no light.[5][6] Moreover, quantum field theory in curved spacetime predicts that event horizons emit Hawking radiation, with the same spectrum as a black body of a temperature inversely proportional to its mass. This temperature is on the order of billionths of a kelvin for black holes of stellar mass, making it essentially impossible to observe directly.',
        },
        config:
          '<View>\n  <Header value="Please read the passage" />\n  <Text name="text" value="$text" granularity="word"/>\n  <Header value="Select a text span answering the following question:"/>\n  <Text name="question" value="$question"/>\n\n  <Labels name="answer" toName="text">\n    <Label value="Answer" maxUsage="1" background="red"/>\n  </Labels>\n\n</View>\n\n<!-- {\n"data": {\n  "text": "The boundary of the region from which no escape is possible is called the event horizon. Although the event horizon has an enormous effect on the fate and circumstances of an object crossing it, according to general relativity it has no locally detectable features.[4] In many ways, a black hole acts like an ideal black body, as it reflects no light.[5][6] Moreover, quantum field theory in curved spacetime predicts that event horizons emit Hawking radiation, with the same spectrum as a black body of a temperature inversely proportional to its mass. This temperature is on the order of billionths of a kelvin for black holes of stellar mass, making it essentially impossible to observe directly.",\n  "question": "How could black holes be detected?"\n},\n"annotations": [\n  {"result": [\n    {\n        "value": {\n            "start": 423,\n            "end": 553,\n            "text": "event horizons emit Hawking radiation, with the same spectrum as a black body of a temperature inversely proportional to its mass.",\n            "labels": [\n                "Answer"\n            ]\n        },\n        "id": "b0wKkdnnRc",\n        "from_name": "answer",\n        "to_name": "text",\n        "type": "labels"\n    }\n    ]\n  }]\n}\n-->\n',
      },
      {
        title: 'Text Classification',
        type: 'community',
        group: 'Natural Language Processing',
        order: 2,
        image: '/front-static/templates/text-classification.png',
        details: '<h1>Classify text document</h1>',
        data: {
          text: 'This is a great 3D movie that delivers everything almost right in your face.',
        },
        config:
          '<View>\n  <Text name="text" value="$text"/>\n  <View style="box-shadow: 2px 2px 5px #999;\n               padding: 20px; margin-top: 2em;\n               border-radius: 5px;">\n    <Header value="Choose text sentiment"/>\n    <Choices name="sentiment" toName="text"\n             choice="single" showInLine="true">\n      <Choice value="Positive"/>\n      <Choice value="Negative"/>\n      <Choice value="Neutral"/>\n    </Choices>\n  </View>\n</View>\n\n<!-- {\n  "data": {"text": "This is a great 3D movie that delivers everything almost right in your face."}\n} -->\n',
      },
      {
        title: 'Named Entity Recognition',
        type: 'community',
        group: 'Natural Language Processing',
        order: 3,
        image: '/front-static/templates/named-entity-recognition.png',
        details: '<h1>Extract named entities from text</h1>',
        data: {
          text: 'To have faith is to trust yourself to the water',
        },
        config:
          '<View>\n  <Labels name="label" toName="text">\n    <Label value="PER" background="red"/>\n    <Label value="ORG" background="darkorange"/>\n    <Label value="LOC" background="orange"/>\n    <Label value="MISC" background="green"/>\n  </Labels>\n\n  <Text name="text" value="$text"/>\n</View>\n',
      },
      {
        title: 'Taxonomy',
        type: 'community',
        group: 'Natural Language Processing',
        order: 4,
        image: '/front-static/templates/taxonomy.png',
        details: '<h1>Do multilabel hierarchical classification</h1>',
        data: {
          text: 'To have faith is to trust yourself to the water',
        },
        config:
          '<View>\n  <Text name="text" value="$text"/>\n  <Taxonomy name="taxonomy" toName="text">\n    <Choice value="Archaea" />\n    <Choice value="Bacteria" />\n    <Choice value="Eukarya">\n      <Choice value="Human" />\n      <Choice value="Oppossum" />\n      <Choice value="Extraterrestial" />\n    </Choice>\n  </Taxonomy>\n</View>\n',
      },
      {
        title: 'Relation Extraction',
        type: 'community',
        group: 'Natural Language Processing',
        order: 5,
        image: '/front-static/templates/relation-extraction.png',
        data: {
          text: 'Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for the Altair 8800.',
        },
        details:
          '<h1>Predict attributes and relations for entities in a sentence</h1>',
        config:
          '<View>\n   <Relations>\n    <Relation value="org:founded_by"/>\n    <Relation value="org:founded"/>\n  </Relations>\n  <Labels name="label" toName="text">\n    <Label value="Organization" background="orange"/>\n    <Label value="Person" background="green"/>\n    <Label value="Datetime" background="blue"/>\n  </Labels>\n\n  <Text name="text" value="$text"/>\n</View>\n\n<!-- {"data": {\n  "text": "Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for the Altair 8800."\n}} -->\n',
      },
      {
        title: 'Machine Translation',
        type: 'community',
        group: 'Natural Language Processing',
        image: '/front-static/templates/machine-translation.png',
        details: '<h1>Translate text from one language to another</h1>',
        data: {
          english: 'To have faith is to trust yourself to the water',
        },
        config:
          '<View>\n  <View style="display: grid; grid-template: auto/1fr 1fr; column-gap: 1em">\n    <Header value="Read the sentence in English" />\n    <Header value="Provide translaton in Spanish" />\n\n  <Text name="english" value="$english" />\n\n  <TextArea name="spanish" toName="english" transcription="true"\n            showSubmitButton="true" maxSubmissions="1" editable="true"\n            required="true"/>\n  </View>\n</View>\n',
      },
      {
        title: 'Text Summarization',
        type: 'community',
        group: 'Natural Language Processing',
        image: '/front-static/templates/text-summarization.png',
        details: '<h1>Provide one sentence summary</h1>',
        data: {
          text: 'There are two general approaches to automatic summarization: extraction and abstraction. Extraction-based summarization: Here, content is extracted from the original data, but the extracted content is not modified in any way. Examples of extracted content include key-phrases that can be used to "tag" or index a text document, or key sentences (including headings) that collectively comprise an abstract, and representative images or video segments, as stated above. For text, extraction is analogous to the process of skimming, where the summary (if available), headings and subheadings, figures, the first and last paragraphs of a section, and optionally the first and last sentences in a paragraph are read before one chooses to read the entire document in detail.[3] Other examples of extraction that include key sequences of text in terms of clinical relevance (including patient/problem, intervention, and outcome).[4] Abstraction-based summarization: This has been applied mainly for text. Abstractive methods build an internal semantic representation of the original content, and then use this representation to create a summary that is closer to what a human might express. Abstraction may transform the extracted content by paraphrasing sections of the source document, to condense a text more strongly than extraction. Such transformation, however, is computationally much more challenging than extraction, involving both natural language processing and often a deep understanding of the domain of the original text in cases where the original document relates to a special field of knowledge. "Paraphrasing" is even more difficult to apply to image and video, which is why most summarization systems are extractive.',
        },
        config:
          '<View>\n  <Header value="Please read the text" />\n  <Text name="text" value="$text" />\n\n  <Header value="Provide one sentence summary" />\n  <TextArea name="answer" toName="text"\n            showSubmitButton="true" maxSubmissions="1" editable="true"\n            required="true" />\n</View>\n\n\n<!-- {\n "data": {\n   "text": "There are two general approaches to automatic summarization: extraction and abstraction. Extraction-based summarization: Here, content is extracted from the original data, but the extracted content is not modified in any way. Examples of extracted content include key-phrases that can be used to \\"tag\\" or index a text document, or key sentences (including headings) that collectively comprise an abstract, and representative images or video segments, as stated above. For text, extraction is analogous to the process of skimming, where the summary (if available), headings and subheadings, figures, the first and last paragraphs of a section, and optionally the first and last sentences in a paragraph are read before one chooses to read the entire document in detail.[3] Other examples of extraction that include key sequences of text in terms of clinical relevance (including patient/problem, intervention, and outcome).[4] Abstraction-based summarization: This has been applied mainly for text. Abstractive methods build an internal semantic representation of the original content, and then use this representation to create a summary that is closer to what a human might express. Abstraction may transform the extracted content by paraphrasing sections of the source document, to condense a text more strongly than extraction. Such transformation, however, is computationally much more challenging than extraction, involving both natural language processing and often a deep understanding of the domain of the original text in cases where the original document relates to a special field of knowledge. \\"Paraphrasing\\" is even more difficult to apply to image and video, which is why most summarization systems are extractive."\n },\n "annotations": [{\n     "result": [\n       {\n         "value": {\n           "text": [\n             "There are two approaches to automatic summarization: extraction and abstraction. In extraction summarization content is extracted from the original data, whereas Abstraction may transform the extracted content by paraphrasing sections of the source document."\n           ]\n         },\n         "id": "Zc_Rb6Bszp",\n         "from_name": "answer",\n         "to_name": "text",\n         "type": "textarea"\n       }\n     ]\n   }]\n } -->\n',
      },
    ],
  },
  {
    label: 'Audio/Speech Processing',
    children: [
      {
        title: 'Automatic Speech Recognition',
        type: 'community',
        group: 'Audio/Speech Processing',
        image: '/front-static/templates/automatic-speech-recognition.png',
        details: '<h1>Provide transcript for the audio</h1>',
        data: {
          audio: '/front-static/samples/game.wav',
        },
        config:
          '<View>\n  <Audio name="audio" value="$audio" zoom="true" hotkey="ctrl+enter" />\n  <Header value="Provide Transcription" />\n  <TextArea name="transcription" toName="audio"\n            rows="4" editable="true" maxSubmissions="1" />\n</View>\n',
      },
      {
        title: 'Automatic Speech Recognition using Segments',
        type: 'community',
        group: 'Audio/Speech Processing',
        image:
          '/front-static/templates/automatic-speech-recognition-using-segments.png',
        details:
          '<h1>Do voice activity segmentation and provide a transcript for the audio</h1>',
        data: {
          audio: '/front-static/samples/game.wav',
        },
        config:
          '<View>\n  <Labels name="labels" toName="audio">\n    <Label value="Speech" />\n    <Label value="Noise" />\n  </Labels>\n\n  <AudioPlus name="audio" value="$audio"/>\n\n  <TextArea name="transcription" toName="audio"\n            rows="2" editable="true"\n            perRegion="true" required="true" />\n</View>\n',
      },
      {
        title: 'Intent Classification',
        type: 'community',
        group: 'Audio/Speech Processing',
        image: '/front-static/templates/intent-classification.png',
        data: {
          audio: '/front-static/samples/game.wav',
        },
        details:
          '<h1>Do voice activity segmentation and choose spoken intent</h1>',
        config:
          '<View>\n  <Labels name="labels" toName="audio">\n    <Label value="Segment" />\n  </Labels>\n\n  <AudioPlus name="audio" value="$audio"/>\n\n  <Choices name="intent" toName="audio" perRegion="true" required="true">\n    <Choice value="Question" />\n    <Choice value="Request" />\n    <Choice value="Satisfied" />\n    <Choice value="Interested" />\n    <Choice value="Unsatisfied" />\n  </Choices>\n</View>\n',
      },
      {
        title: 'Signal Quality Detection',
        type: 'community',
        group: 'Audio/Speech Processing',
        image: '/front-static/templates/signal-quality-detection.png',
        details: '<h1>Rate signal quality</h1>',
        data: {
          audio: '/front-static/samples/game.wav',
        },
        config:
          '<View>\n  <Rating name="rating" toName="audio" maxRating="10" icon="star" size="medium" />\n  <Audio name="audio" value="$audio"/>\n</View>\n',
      },
      {
        title: 'Sound Event Detection',
        type: 'community',
        group: 'Audio/Speech Processing',
        image: '/front-static/templates/sound-event-detection.png',
        details: '<h1>Select audio span and classify sound event</h1>',
        data: {
          audio: '/front-static/samples/game.wav',
        },
        config:
          '<View>\n  <Labels name="label" toName="audio" zoom="true" hotkey="ctrl+enter">\n    <Label value="Event A" background="red"/>\n    <Label value="Event B" background="green"/>\n  </Labels>\n  <AudioPlus name="audio" value="$audio"/>\n</View>\n',
      },
      {
        title: 'Speaker Segmentation',
        type: 'community',
        group: 'Audio/Speech Processing',
        image: '/front-static/templates/speaker-segmentation.png',
        data: {
          audio: '/front-static/samples/game.wav',
        },
        details: '<h1>Perform speaker segmentation / diarization task</h1>',
        config:
          '<View>\n  <Labels name="label" toName="audio" zoom="true" hotkey="ctrl+enter">\n    <Label value="Speaker one" background="#00FF00"/>\n    <Label value="Speaker two" background="#12ad59"/>\n  </Labels>\n  <AudioPlus name="audio" value="$audio" />\n</View>\n',
      },
    ],
  },
  {
    label: 'Conversational AI',
    children: [
      {
        title: 'Coreference Resolution & Entity Linking',
        type: 'community',
        group: 'Conversational AI',
        image:
          '/front-static/templates/coreference-resolution-and-entity-linking.png',
        data: {
          corefText:
            'I voted for Obama because he was most aligned with my values, she said.',
        },
        details:
          '<h1>Do coreference resolution between parts of speech and link entities in text</h1>',
        config:
          '<View>\n  <Labels name="label" toName="text">\n    <Label value="Noun" background="red"/>\n    <Label value="Pronoun" background="darkorange"/>\n  </Labels>\n\n  <Text name="text" value="$corefText"/>\n</View>\n',
      },
      {
        title: 'Intent Classification and Slot Filling',
        type: 'community',
        group: 'Conversational AI',
        image:
          '/front-static/templates/intent-classification-and-slot-filling.png',
        data: {
          humanMachineDialogue: [
            { author: 'Human', text: 'Hi, Robot!' },
            {
              author: 'Robot',
              text: 'Nice to meet you, man! Tell me what you want.',
            },
            {
              author: 'Human',
              text: 'Order me a pizza from Golden Boy at Green Street ',
            },
            {
              author: 'Robot',
              text: 'Done. When do you want to get the order?',
            },
            { author: 'Human', text: 'At 3am in the morning, please' },
          ],
        },
        details:
          '<h1>Build task-oriented dialogue system by selecting dialogue intents and extracting slot entities</h1>',
        config:
          '<View>\n  <ParagraphLabels name="entity_slot" toName="dialogue">\n    <Label value="Person" />\n    <Label value="Organization" />\n    <Label value="Location" />\n    <Label value="Datetime" />\n    <Label value="Quantity" />\n  </ParagraphLabels>\n  <Paragraphs name="dialogue" value="$humanMachineDialogue" layout="dialogue" />\n    <Choices name="intent" toName="dialogue"\n         choice="single" showInLine="true">\n        <Choice value="Greeting"/>\n        <Choice value="Customer request"/>\n        <Choice value="Small talk"/>\n    </Choices>\n</View>\n',
      },
      {
        title: 'Response Generation',
        type: 'community',
        group: 'Conversational AI',
        image: '/front-static/templates/response-generation.png',
        data: {
          dialogue: [
            { author: 'Alice', text: 'Hi, Bob.' },
            { author: 'Bob', text: 'Hello, Alice!' },
            { author: 'Alice', text: "What's up?" },
            { author: 'Bob', text: 'Good. Ciao!' },
            { author: 'Alice', text: 'Bye, Bob.' },
          ],
        },
        details:
          '<h1>Collect chatbot training data by generating next dialogue response</h1>',
        config:
          '<View>\n  <Paragraphs name="chat" value="$dialogue" layout="dialogue" />\n  <Header value="Provide response" />\n  <TextArea name="response" toName="chat" rows="4" editable="true" maxSubmissions="1" />\n</View>\n',
      },
      {
        title: 'Response Selection',
        type: 'community',
        group: 'Conversational AI',
        image: '/front-static/templates/response-selection.png',
        data: {
          humanMachineDialogue: [
            { author: 'Human', text: 'Hi, Robot!' },
            {
              author: 'Robot',
              text: 'Nice to meet you, man! Tell me what you want.',
            },
            {
              author: 'Human',
              text: 'Order me a pizza from Golden Boy at Green Street ',
            },
            {
              author: 'Robot',
              text: 'Done. When do you want to get the order?',
            },
            { author: 'Human', text: 'At 3am in the morning, please' },
          ],
          respone: 'Sure, no problem!',
          resptwo: "Sorry, it's too early. May be we can change the time?",
          respthree: "Don't eat junk food man, it's bad for you...",
        },
        details:
          '<h1>Collect chatbot training data by selecting next dialogue response</h1>',
        config:
          '<View>\n  <Paragraphs name="prg" value="$humanMachineDialogue" layout="dialogue" />\n  <Header value="Choose response" />\n  <View style="display: flex;">\n    <View>\n    <Text name="resp1" value="$respone" />\n    <Text name="resp2" value="$resptwo" />\n    <Text name="resp3" value="$respthree" />\n    </View>\n    <View style="padding: 50px;">\n    <Choices name="resp" toName="prg" required="true">\n      <Choice value="One" />\n      <Choice value="Two" />\n      <Choice value="Three" />\n    </Choices>\n    </View>\n  </View>\n</View>\n',
      },
    ],
  },
  {
    label: 'Ranking & Scoring',
    children: [
      {
        title: 'Content-based Image Retrieval',
        type: 'community',
        group: 'Ranking & Scoring',
        image: '/front-static/templates/content-based-image-search.png',
        details: '<h1>Select images related to the query image</h1>',
        data: {
          query_image: '/front-static/samples/sample.jpg',
          image1: '/front-static/samples/sample.jpg',
          image2: '/front-static/samples/sample.jpg',
          image3: '/front-static/samples/sample.jpg',
        },
        config:
          '<View>\n  <Image name="query" value="$query_image" />\n  <Header value="Choose similar images:" />\n  <View style="display: flex">\n    <View>\n    <Image name="image1" value="$image1" />\n    <Image name="image2" value="$image2" />\n    <Image name="image3" value="$image3" />\n    </View>\n    <View>\n    <Choices name="similar" toName="query" required="true" choice="multiple">\n      <Choice value="One" />\n      <Choice value="Two" />\n      <Choice value="Three" />\n    </Choices>\n    </View>\n  </View>\n</View>\n',
      },
      {
        title: 'Document Retrieval',
        type: 'community',
        group: 'Ranking & Scoring',
        image: '/front-static/templates/document-retrieval.png',
        details: '<h1>Select document related to the query</h1>',
        data: {
          query: 'To have faith is to trust yourself to the water',
          text1: 'To have faith is to trust yourself to the water',
          text2: 'To have faith is to trust yourself to the water',
          text3: 'To have faith is to trust yourself to the water',
        },
        config:
          '<View>\n  <Text name="query" value="$query" />\n  <Header value="Select document related to the query:" />\n  <View style="display: flex">\n    <View style="width:50%">\n      <Text name="text1" value="$text1" />\n      <Text name="text2" value="$text2" />\n      <Text name="text3" value="$text3" />\n    </View>\n    <View>\n      <Choices name="selection" toName="query" required="true" choice="multiple">\n        <Choice value="One" />\n        <Choice value="Two" />\n        <Choice value="Two" />\n      </Choices>\n    </View>\n  </View>\n</View>\n',
      },
      {
        title: 'Pairwise classification',
        type: 'community',
        group: 'Ranking & Scoring',
        image: '/front-static/templates/pairwise-classification.png',
        details: '<h1>Select one of two items</h1>',
        config:
          '<View>\n  <Header>Select one of two items</Header>\n  <Pairwise name="pw" toName="text1,text2" />\n  <Text name="text1" value="$pairText1" />\n  <Text name="text2" value="$pairText2" />\n</View>\n',
      },
      {
        title: 'Pairwise regression',
        type: 'community',
        group: 'Ranking & Scoring',
        image: '/front-static/templates/pairwise-regression.png',
        details:
          '<h1>Select how likely it is that two items occur together</h1>',
        data: {
          pairText1: "Look at this! It's a brand new product",
          pairText2: "Look at this! It's an awesome piece of sh*t",
        },
        config:
          '<View>\n  <Header>Set how likely it is that these images represent the same thing:</Header>\n    <Rating name="rating" toName="image1,image2"/>\n    <Image name="image1" value="$image1" />\n    <Image name="image2" value="$image2" />\n</View>\n',
      },
    ],
  },
  {
    label: 'Structured Data Parsing',
    children: [
      {
        title: 'Freeform Metadata',
        type: 'community',
        group: 'Structured Data Parsing',
        image: '/front-static/templates/freeform-metadata.png',
        details: '<h1>Specify your own metadata in table</h1>',
        data: {
          text: 'This is a great 3D movie that delivers everything almost right in your face.',
        },
        config:
          '<View>\n  <Style>\n    input[type="text"][name^="table"] { border-radius: 0px; border-right: none;}\n    input[type="text"][name^="table_metric"] { border-right: 1px solid #ddd; }\n    div[class*=" TextAreaRegion_mark"] {background: none; height: 33px; border-radius: 0; min-width: 135px;}\n  </Style>\n\n  <Text value="$text" name="text"/>\n\n  <View style="display: grid;  grid-template-columns: 1fr 1fr; max-height: 300px; width: 400px">\n    <TextArea name="table_name_1" toName="text" placeholder="name" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_value_1" toName="text" placeholder="value" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_name_2" toName="text" placeholder="name" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_value_2" toName="text" placeholder="value" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_name_3" toName="text" placeholder="name" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_value_3" toName="text" placeholder="value" editable="true" maxSubmissions="1"/>\n  </View>\n</View>\n\n<!-- {\n  "data": {"text": "This is a great 3D movie that delivers everything almost right in your face."}\n}\n-->\n',
      },
      {
        title: 'HTML Entity Recognition',
        type: 'community',
        group: 'Structured Data Parsing',
        image: '/front-static/templates/html-entity-recognition.png',
        details: '<h1>Extract entities from hypertext documents</h1>',
        data: {
          html: '<div style="max-width: 750px"><div style="clear: both"><div style="float: right; display: inline-block; border: 1px solid #F2F3F4; background-color: #F8F9F9; border-radius: 5px; padding: 7px; margin: 10px 0;"><p><b>Jules</b>: No no, Mr. Wolfe, it\'s not like that. Your help is definitely appreciated.</p></div></div><div style="clear: both"><div style="float: right; display: inline-block; border: 1px solid #F2F3F4; background-color: #F8F9F9; border-radius: 5px; padding: 7px; margin: 10px 0;"><p><b>Vincent</b>: Look, Mr. Wolfe, I respect you. I just don\'t like people barking orders at me, that\'s all.</p></div></div><div style="clear: both"><div style="display: inline-block; border: 1px solid #D5F5E3; background-color: #EAFAF1; border-radius: 5px; padding: 7px; margin: 10px 0;"><p><b>The Wolf</b>: If I\'m curt with you, it\'s because time is a factor. I think fast, I talk fast, and I need you two guys to act fast if you want to get out of this. So pretty please, with sugar on top, clean the car.</p></div></div></div>',
        },
        config:
          '<View>\n  <HyperTextLabels name="ner" toName="text">\n    <Label value="Title" background="green"/>\n    <Label value="Author" background="blue"/>\n    <Label value="Body" background="yellow"/>\n  </HyperTextLabels>\n\n  <View style="border: 1px solid #CCC;\n               border-radius: 10px;\n               padding: 5px">\n    <HyperText name="text" value="$html"/>\n  </View>\n</View>\n',
      },
      {
        title: 'PDF Classification',
        type: 'community',
        group: 'Structured Data Parsing',
        image: '/front-static/templates/pdf-classification.png',
        details: '<h1>Classify PDF documents</h1>',
        data: {
          pdf: "<embed src='/front-static/samples/sample.pdf' width='100%' height='600px'/>",
        },
        config:
          '<View>\n  <Header value="Rate this article"/>\n  <Rating name="rating" toName="pdf" maxRating="10" icon="star" size="medium" />\n\n  <Choices name="choices" choice="single-radio" toName="pdf" showInline="true">\n    <Choice value="Important article"/>\n    <Choice value="Yellow press"/>\n  </Choices>\n  <HyperText name="pdf" value="$pdf" inline="true"/>\n</View>\n\n\n<!-- {\n  "data": {\n    "pdf": "<embed src=\'/front-static/samples/sample.pdf\' width=\'100%\' height=\'600px\'/>"\n  }\n} -->\n',
      },
      {
        title: 'Tabular Data',
        type: 'community',
        group: 'Structured Data Parsing',
        image: '/front-static/templates/tabular-data.png',
        details: '<h1>Annotate data in tables</h1>',
        data: {
          item: {
            'Card number': 18799210,
            'First name': 'Max',
            'Last name': 'Nobel',
          },
        },
        config:
          '<View>\n    <Header value="Table with {key: value} pairs"/>\n    <Table name="table" value="$item"/>\n    <Choices name="choice" toName="table">\n        <Choice value="Correct"/>\n        <Choice value="Incorrect"/>\n    </Choices>\n</View>\n',
      },
    ],
  },
  {
    label: 'Time Series Analysis',
    children: [
      {
        title: 'Activity Recognition',
        type: 'community',
        group: 'Time Series Analysis',
        image: '/front-static/templates/activity-recognition.png',
        data: {
          timeseriesUrl:
            '/front-static/samples/time-series.csv?time=time&values=velocity%2Cacceleration&sep=%2C&tf=%25Y-%25m-%25d+%25H%3A%25M%3A%25S.%25f',
        },
        details:
          '<h1>Track and classify activity from sensors and IMU devices</h1>',
        config:
          '<View>\n    <!-- Control tag for region labels -->\n    <TimeSeriesLabels name="label" toName="ts">\n        <Label value="Run" background="red"/>\n        <Label value="Walk" background="green"/>\n        <Label value="Fly" background="blue"/>\n        <Label value="Swim" background="#f6a"/>\n        <Label value="Ride" background="#351"/>\n    </TimeSeriesLabels>\n\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="ts" valueType="url" value="$timeseriesUrl"\n                sep=","\n                timeColumn="time"\n                timeFormat="%Y-%m-%d %H:%M:%S.%f"\n                timeDisplayFormat="%Y-%m-%d"\n                overviewChannels="velocity">\n\n        <Channel column="velocity"\n                 units="miles/h"\n                 displayFormat=",.1f"\n                 strokeColor="#1f77b4"\n                 legend="Velocity"/>\n\n        <Channel column="acceleration"\n                 units="miles/h^2"\n                 displayFormat=",.1f"\n                 strokeColor="#ff7f0e"\n                 legend="Acceleration"/>\n    </TimeSeries>\n</View>\n',
      },
      {
        title: 'Change Point Detection',
        type: 'community',
        group: 'Time Series Analysis',
        image: '/front-static/templates/change-point-detection.png',
        details: '<h1>Identify changing points on time series signals</h1>',
        data: {
          csv: '/front-static/samples/time-series.csv?time=time&values=velocity%2Cacceleration&sep=%2C&tf=%25Y-%25m-%25d+%25H%3A%25M%3A%25S.%25f',
        },
        config:
          '<View>\n    <!-- Control tag for region labels -->\n    <TimeSeriesLabels name="label" toName="ts">\n        <Label value="Change" background="red" />\n    </TimeSeriesLabels>\n\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="ts" valueType="url" value="$csv"\n                sep=","\n                timeColumn="time"\n                timeFormat="%Y-%m-%d %H:%M:%S.%f"\n                timeDisplayFormat="%Y-%m-%d"\n                overviewChannels="velocity">\n\n        <Channel column="velocity"\n                 units="miles/h"\n                 displayFormat=",.1f"\n                 strokeColor="#1f77b4"\n                 legend="Velocity"/>\n    </TimeSeries>\n</View>\n',
      },
      {
        title: 'Outliers & Anomaly Detection',
        type: 'community',
        group: 'Time Series Analysis',
        image: '/front-static/templates/outliers-anomaly-detection.png',
        data: {
          csv: '/front-static/samples/time-series.csv?time=time&values=velocity%2Cacceleration&sep=%2C&tf=%25Y-%25m-%25d+%25H%3A%25M%3A%25S.%25f',
        },
        details:
          '<h1>Select time spans identifying outliers or anomalies on time series signals</h1>',
        config:
          '<View>\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="ts" valueType="url" value="$csv"\n                sep=","\n                timeColumn="time"\n                timeFormat="%Y-%m-%d %H:%M:%S.%f"\n                timeDisplayFormat="%Y-%m-%d"\n                overviewChannels="velocity">\n\n        <Channel column="velocity"\n                 units="miles/h"\n                 displayFormat=",.1f"\n                 strokeColor="#1f77b4"\n                 legend="Velocity"/>\n    </TimeSeries>\n\n    <!-- Control tag for region labels -->\n    <TimeSeriesLabels name="label" toName="ts">\n        <Label value="Region" background="red" />\n    </TimeSeriesLabels>\n\n    <Choices name="region_type" toName="ts"\n          perRegion="true" required="true">\n        <Choice value="Outlier"/>\n        <Choice value="Anomaly"/>\n    </Choices>\n</View>\n',
      },
      {
        title: 'Signal Quality',
        type: 'community',
        group: 'Time Series Analysis',
        image: '/front-static/templates/signal-quality.png',
        details: '<h1>Rate signal quality</h1>',
        data: {
          csv: '/front-static//samples/time-series.csv?time=time&values=velocity%2Cacceleration&sep=%2C&tf=%25Y-%25m-%25d+%25H%3A%25M%3A%25S.%25f',
        },
        config:
          '<View>\n    <!-- No region selected section -->\n    <View visibleWhen="no-region-selected"\n          style="height:120px">\n\n        <!-- Control tag for region labels -->\n        <TimeSeriesLabels name="label" toName="ts">\n            <Label value="Region" background="#5b5"/>\n        </TimeSeriesLabels>\n    </View>\n\n    <!-- Region selected section with choices and rating -->\n    <View visibleWhen="region-selected" style="height:120px">\n\n        <!-- Per region Rating -->\n        <Rating name="rating" toName="ts"\n                maxRating="10" icon="star"\n                perRegion="true"/>\n        <!-- Per region Choices  -->\n        <Choices name="choices" toName="ts"\n                 showInline="true" required="true"\n                 perRegion="true">\n            <Choice value="Good"/>\n            <Choice value="Medium"/>\n            <Choice value="Poor"/>\n        </Choices>\n    </View>\n\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="ts" valueType="url" value="$csv"\n                sep="," timeColumn="time">\n        <Channel column="signal_1"\n                 strokeColor="#17b" legend="Signal 1"/>\n        <Channel column="signal_2"\n                 strokeColor="#f70" legend="Signal 2"/>\n    </TimeSeries>\n</View>\n',
      },
      {
        title: 'Time Series Forecasting',
        type: 'community',
        group: 'Time Series Analysis',
        image: '/front-static/templates/time-series-forecasting.png',
        data: {
          csv: '/front-static/samples/time-series.csv?time=time&values=velocity%2Cacceleration&sep=%2C&tf=%25Y-%25m-%25d+%25H%3A%25M%3A%25S.%25f',
        },
        details:
          '<h1>Prepare training data for time series forecasting models</h1>',
        config:
          '<View>\n    <!-- Control tag for region labels -->\n    <Header value="Select predictable region spans in time series:"/>\n    <TimeSeriesLabels name="predictable" toName="stock">\n        <Label value="Regions" background="red" />\n    </TimeSeriesLabels>\n\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="stock" valueType="url" value="$csv"\n                sep=","\n                timeColumn="time"\n                timeFormat="%Y-%m-%d %H:%M:%S.%f"\n                timeDisplayFormat="%Y-%m-%d"\n                overviewChannels="value">\n\n        <Channel column="value"\n                 displayFormat=",.1f"\n                 strokeColor="#1f77b4"\n                 legend="Stock Value"/>\n    </TimeSeries>\n    <Header value="Forecast next trend:"/>\n    <Choices name="trend_forecast" toName="stock">\n        <Choice value="Up"/>\n        <Choice value="Down"/>\n        <Choice value="Steady"/>\n    </Choices>\n</View>\n',
      },
    ],
  },
  {
    label: 'Videos',
    children: [
      {
        title: 'Video Classification',
        type: 'community',
        group: 'Videos',
        image: '/front-static/templates/video-classification.png',
        details: '<h1>Classify video</h1>',
        data: {
          video: '/front-static/samples/opossum_snow.mp4',
        },
        config:
          '<View>\n  <Video name="video" value="$video"/>\n  <Choices name="choice" toName="video" showInLine="true">\n    <Choice value="Blurry" />\n    <Choice value="Sharp" />\n  </Choices>\n</View>\n\n<!-- {\n"data": {\n   "video": "/front-static/samples/opossum_snow.mp4"\n},\n"annotations": [{"result":\n    [\n        {\n            "value": {\n                "choices": [\n                    "Blurry"\n                ]\n            },\n            "id": "vB3U85jSU4",\n            "from_name": "choice",\n            "to_name": "video",\n            "type": "choices"\n        }\n    ]\n  }]\n}\n-->\n',
      },
      {
        title: 'Video Timeline Segmentation',
        type: 'community',
        group: 'Videos',
        image: '/front-static/templates/video-timeline-segmentation.png',
        details: '<h1>Select and classify video segments</h1>',
        data: {
          video_url: '/front-static/samples/opossum_snow.mp4',
        },
        config:
          '<View>\n  <Header value="Video timeline segmentation via AudioPlus sync trick"/>\n  <Video name="video" value="$video_url" sync="audio"/>\n  <Labels name="tricks" toName="audio" choice="multiple">\n    <Label value="Kickflip" background="#1BB500"/>\n    <Label value="360 Flip" background="#FFA91D"/>\n    <Label value="Trick" background="#358EF3"/>\n  </Labels>\n  <AudioPlus name="audio" value="$video_url" sync="video" speed="false"/>\n</View>\n\n<!--\n  Audio tag uses the same $video file to be in sync, video is muted\n-->\n\n<!--{\n "video_url": "/front-static/samples/opossum_snow.mp4"\n}-->\n',
      },
    ],
  },
];
